<template>
  <div class="silde_box">
    <slide-verify
      class="silde_box"
      ref="block"
      w="300"
      :imgs="state.imgs"
      slider-text="向右滑动"
      @again="onAgain"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
    ></slide-verify>
    <div>{{ msg }}</div>
  </div>
</template>

<script setup>
import { defineComponent, ref, reactive } from "vue";
// 局部注册组件，需要单独引用组件样式
// 只提供局部引用的方式，不再采用插件形式，方便按需加载，减少主包大小
import SlideVerify from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";
import verify0 from "@/assets/images/verify_0.jpg";
import verify1 from "@/assets/images/verify_1.jpg";
import verify2 from "@/assets/images/verify_2.jpg";

const emit = defineEmits(["success"]);

const msg = ref("");
const block = ref();
const state = reactive({
  imgs: [verify0, verify1, verify2],
});
const onAgain = () => {
  msg.value = "检测到非人为操作的哦！ try again";
  // 刷新
  block.value?.refresh();
};

const onSuccess = (times) => {
  msg.value = `login success, 耗时${(times / 1000).toFixed(1)}s`;
  emit("success");
};

const onFail = () => {
  msg.value = "验证不通过";
};

const onRefresh = () => {
  msg.value = "点击了刷新小图标";
};

const handleClick = () => {
  // 刷新
  block.value?.refresh();
  msg.value = "";
};
</script>
<style scoped>
.silde_box {
  margin: 0 auto;
}
:deep(.icon-arrow-right) {
  font-size: 34px;
}
:deep(.icon-arrow-right::before) {
  content: "";
  background-image: url("@/assets/images/login.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px; /* 调整大小 */
  height: 20px;
  display: inline-block;
}
:deep(.icon-fail::before) {
  content: "";
  background-image: url("@/assets/images/error.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px; /* 调整大小 */
  height: 20px;
  display: inline-block;
}
:deep(.icon-refresh::before) {
  content: "";
  background-image: url("@/assets/images/refresh.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px; /* 调整大小 */
  height: 20px;
  display: inline-block;
}
:deep(.icon-success::before) {
  content: "";
  background-image: url("@/assets/images/succeed.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px; /* 调整大小 */
  height: 20px;
  display: inline-block;
}
</style>
